<template>
    <view class="history-container">
        <GZGJHeader title="历史记录"></GZGJHeader>
        <scroll-view class="history-body-container" scroll-y="true">
            <HistoryItem
                class="history-item-container"
                v-for="(item, index) in historyItems"
                :mobile="item.mobile"
                :create-time="item.createTime"
                :send-time="item.sendTime"
                :type="item.type"
                :status="item.status"
            ></HistoryItem>
        </scroll-view>
    </view>
</template>

<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import GZGJHeader from '@/components/GZGJHeader.vue';
import HistoryItem from '@/components/HistoryItem.vue';
const historyItems = ref([]);
onBeforeMount(() => {
    const historyItem = {
        mobile: '1357046031',
        createTime: '2023-12-21',
        sendTime: '2023-12-21',
        type: 0,
        status: 0
    };
    for (let i = 0; i < 10; i++) {
        const newHistoryItem = { ...historyItem };
        newHistoryItem.mobile = newHistoryItem.mobile.concat(i);
        newHistoryItem.type = Math.round(Math.random());
        newHistoryItem.status = Math.round(Math.random());
        historyItems.value.push(newHistoryItem);
    }
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.history-container {
    @extend .column-container-layout;
    flex: 1;
    .history-body-container {
        @extend .column-container-layout;
        .history-item-container {
            width: auto;
            margin: 15px;
        }
    }
}
</style>
